<template>
  <div class="content-wrapper">
    <div class="content-header">物料管理</div>
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="物料编号">
          <el-input size="medium" v-model.trim="listQuery.materialCode" placeholder="编号"></el-input>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input size="medium" v-model.trim="listQuery.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="getDataList"
          >
            搜索
          </el-button>
          <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-plus"
            @click="openDialog('create')"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="dataList"
        highlight-current-row
      >
        <el-table-column label="物料名称" prop="name" min-width="180px" />
        <el-table-column label="物料编码" prop="materialCode" width="160px" align="center" />
        <el-table-column label="每升含量" prop="contentPerLitre" width="160px" align="center" />
        <el-table-column label="单位" prop="unit" width="160px" align="center" />
        <el-table-column label="是否自动计算" prop="autoComputeFlag" width="160px" :formatter="(row, column, cellValue, index) => {
          return cellValue?'是':'否'
        }" align="center" />
        <el-table-column label="操作" align="center" width="150px" >
          <template slot-scope="{row,$index}">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
<!--                <el-dropdown-item @click.native="updateStatus(row)">{{ !row.status == 1?'启用':'停用' }}</el-dropdown-item>-->
                <el-dropdown-item @click.native="openDialog('update',row)">修改</el-dropdown-item>
                <el-dropdown-item @click.native="deleteEquipment(row)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page-number.sync="listQuery.pageNumber" :page-size.sync="listQuery.pageSize" @pagination="getDataList" />
    </div>
    <el-dialog
      :title="titleMap[titleStatus]"
      :visible.sync="dialogVisible"
      @close="closeDialog"
      width="30%">
      <el-form ref="form" :rules="rules" :model="saveData" label-width="80px">
        <el-form-item label="编码" prop="materialCode">
          <el-input :disabled="titleStatus == 'update'" v-model="saveData.materialCode" placeholder="编号"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="saveData.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="每升含量" prop="contentPerLitre">
          <el-input v-model="saveData.contentPerLitre" placeholder="每升含量"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="saveData.unit" placeholder="单位"></el-input>
        </el-form-item>
        <el-form-item label="自动计算" prop="autoComputeFlag">
          <el-select v-model="saveData.autoComputeFlag" placeholder="是否自动计算">
            <el-option
              v-for="item in autoComputeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="titleStatus == 'create'?create():update()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { save, update, deleted, page } from '@/api/material/material'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    let checkContentPerLitre = (rule, value, callback) => {
      let numberReg = /^\d+$|^\d+[.]?\d+$/
      if (value !== '') {
        if (!numberReg.test(value)) {
          callback(new Error('输入内容应为数字类型'))
        } else {
          callback()
        }
      } else {
        callback(new Error('输入内容不可为空'))
      }
    }
    return {
      autoComputeOptions: [{label: "是", value: 1}, {label: "否", value: 0}],
      listLoading: false,
      dataList: [],
      total: 0,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 5,
        materialCode: null,
        name: null
      },
      titleMap: {
        create: "新增",
        update: "修改"
      },
      rules: {
        materialCode: [{ required: true, message: '输入内容不可为空', trigger: 'change' }],
        name: [{ required: true, message: '输入内容不可为空', trigger: 'change' }],
        contentPerLitre: [{ required: true, validator: checkContentPerLitre, trigger: 'change' }],
        unit: [{ required: true, message: '输入内容不可为空', trigger: 'change' }],
        autoComputeFlag: [{ required: true, message: '输入内容不可为空', trigger: 'change' }]
      },
      titleStatus: "create",
      dialogVisible: false,
      saveData: {//保存的数据
        materialCode: "",
        contentPerLitre: "",
        autoComputeFlag: 1
      },
      statusOptions: []
    }
  },
  mounted() {
    this.getDataList()
  },
  methods:{
    deleteEquipment(row){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleted(row).then(res => {
          this.$message.success("删除成功")
          this.getDataList()
        })
      }).catch(() => {
        this.$message.info("已取消删除")
      });
    },
    // updateStatus(row){
    //   if (row.status == 1) {
    //     row.status = 0
    //   }else{
    //     row.status = 1
    //   }
    //   updateStatus(row).then(res => {
    //     this.getDataList()
    //     this.$message.success(row.status = 1?'启用成功':'禁用成功')
    //   })
    // },
    update(){
      this.$refs.form.validate(vaild => {
        if (vaild) {
          update(this.saveData).then(res => {
            this.$message.success("修改成功")
            this.getDataList()
            this.dialogVisible = false
          })
        }
      })
    },
    create(){
      this.$refs.form.validate(vaild => {
        if (vaild) {
          save(this.saveData).then(res => {
            this.$message.success("新增成功")
            this.getDataList()
            this.dialogVisible = false
          })
        }
      })
    },
    closeDialog(){
      this.$refs.form.resetFields()
    },
    openDialog(val, row){
      this.titleStatus = val
      if (row) {
        console.log(row, 'row')
        this.saveData = row
        this.saveData.autoComputeFlag = row.autoComputeFlag?1:0
      }
      this.dialogVisible = true
    },
    getDataList(){
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      page(this.listQuery).then(res => {
        this.dataList = res.data.rows
        this.total = res.data.total
      })
    }
  }
}
</script>
